<template>
  <view class="normal-login-container">
	  
	  <!-- 选择身份按钮 -->
	  <view class="login-form-content" v-show="userType == 0">
	  	
	  	<view class="input-item flex align-center">
	  	  <view class="iconfont icon-user icon"></view>
	  	  <input v-model="roomInfo.roomName" class="input" type="text" placeholder="请输入房间名称" maxlength="30" />
	  	</view>
		
		<view class="input-item flex align-center">
		  <view class="iconfont icon-user icon"></view>
		  <input v-model="roomInfo.roomNumber" class="input" type="text" placeholder="房间编号" maxlength="30" />
		</view>
	  	
	  	<view class="action-btn">
	  		<button @click="creatRoom" class="login-btn cu-btn block bg-blue lg round">添加房间</button>
	  	</view>
	  </view>
    
	<!-- 创建房间的列表 -->
	
	<!-- 选择身份按钮 -->
    <view class="login-form-content">
		
		<uni-list v-if="roomList.length >0">
			<uni-list-item :title="item.roomName +'【' + item.roomNumber + '】'" 
				link :to="'/pages/qiangda/index?roomNumber='+item.roomNumber 
				+'&userId=' + userId +'&userType=' + userType +'&nickName=' + nickName
				+'&roomName=' + item.roomName
				"  
				v-for="(item,index) in roomList" @click="afterEnter($event,item.roomNumber)">
				
			</uni-list-item>

		</uni-list>
		
		<view class="action-btn">
			<button @click="loadList()" class="login-btn cu-btn block bg-blue lg round">刷新房间列表</button>
		</view>
		
    </view>
	
     
  </view>
</template>

<script>
  import { createRoom, listRoom } from '@/api/qiangda/room.js'
  import { enterRoom } from '@/api/qiangda/user.js'

  export default {
	  
    data() {
      return {
		userType:'',
		userId:'',
		nickName:'',
		roomInfo:{
			roomName:"测试房间1",
			roomNumber:"888888"
		},
		roomList:[]
      }
    },
    created() {
		var queryParams = this.$route.query;
		// 获取传递过来的参数
		this.userType = queryParams.userType;
		this.userId = queryParams.userId;
		
		this.nickName = queryParams.nickName;
		
		console.log()
		// 加载房间列表
		this.loadList()
		
    },
    methods: {
      // 加载房间列表
      loadList(){
		  listRoom().then(res=>{
			  if(res != null) {
				  this.roomList = res.roomList
			  }
		  })
	  },
	  
	  // 主持人才有权利
	  creatRoom(){
		  createRoom(this.roomInfo).then(res=>{
			console.log('createRoom', res )
			if(res.error) {
				// 有错误信息
				uni.showToast({title: res.error, icon: 'none',duration: 2000})
				return
			} else {
				// 加载房间列表
				this.loadList()
			}
		  })
	  },
	  
	  // 加入房间
	  afterEnter(event,roomNumber){
		  let userInfo = {
			  id: this.userId,
			  nickName: this.nickName,
			  type: this.userType,
			  roomNumber: roomNumber
		  }
		  console.log("userInfo", userInfo)
		  enterRoom(userInfo).then(res=>{
			  console.log(res, '进入房间了')
		  })
	  }
	  
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 4px;
      }

      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 20px auto;
      margin-top: 15%;
      width: 80%;

      .input-item {
        margin: 20px auto;
        background-color: #f5f6f7;
        height: 45px;
        border-radius: 20px;

        .icon {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999;
        }

        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 15px;
        }

      }

      .login-btn {
        margin-top: 40px;
        height: 45px;
      }
      
      .reg {
        margin-top: 15px;
      }
      
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
      
      .login-code {
        height: 38px;
        float: right;
      
        .login-code-img {
          height: 38px;
          position: absolute;
          margin-left: 10px;
          width: 200rpx;
        }
      }
    }
  }

</style>
